<!-- 攻略 -->
<style scoped>
* {
    margin: 0;
    padding: 0;
}

.big {
    width: 100%;
    height: auto;
    background-color: #F4F4F4;
}

/* 攻略顶部 */
.gh {
    display: flex;
    flex-direction: column;
}

.gh_one {
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

/* 导航栏 */
.back {
    width: 96%;
    margin-left: 2%;
    padding-top: 2vh;
    flex-wrap: wrap;
    height: auto;
    background-color: white;
    padding-bottom: 2vh;
    display: flex;
    flex-direction: column;
}

.back-div {
    width: 90%;
    padding-left: 3%;

}

.back-img {
    width: 96%;
    height: 25vh;
    margin-left: 2%;
    padding-top: 1vh;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* 顶部区域 */
.guo {
    font-weight: bold;
    padding-bottom: 1vh;

}

.jiegege {
    font-size: 12px;
}

.list {
    width: 96%;
    margin-left: 2%;
    margin-top: 1vh;
    padding-bottom: 30vh;
}

.list img {
    width: 28%;
    height: 95px;
    border-radius: 10px;
}

.right-bold {
    font-weight: 700;
    font-size: 13px;
}

.list-child {
    width: 100%;
    justify-content: space-around;
    display: flex;
    margin-top: 1vh;
    border-radius: 10px;
    background-color: white;
    align-items: center;
    padding: 5px 0;
}

.right-div img {
    width: 4vh;
    height: 4vh;
    border-radius: 50%;
}

.right-div {
    display: flex;
    align-items: center;
    font-size: 10px;
    padding-top: 15px;
}

.rightxi {
    font-size: 11px;
    padding-top: 1vh;
}

.duo {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    bottom: 13vh;
    justify-content: center;
}

/* 攻略发布人员的名字 */
.long {
    padding-left: 1vh;
}

.child {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    align-items: center;
    height: 8vh;
    background-color: white;
    justify-content: space-around;
    font-size: 12px;
}

.child-child {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.child-child-img {
    width: 20px;
    height: 20px;
}

.rocket {
    width: 5vh;
    height: 5vh;
    z-index: 9999;
}

.backo {
    width: 8vh;
    height: 8vh;
    border-radius: 50%;
    margin-top: -5vh;
    position: absolute;
    box-shadow: 0px 0px 11px 0px rgba(229, 229, 229, 1);
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -5vh;

}

.child-right {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 20px;
    width: 60%;
}

.pb {
    column-count: 2;
    column-gap: 0vh;
    padding-top: 10px;
    padding-left: 2%;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-bottom: 20vh;
}

.pu-one {
    direction: ltr;
    width: 96%;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    break-inside: avoid;
}

.pu-two {
    direction: ltr;
    width: 96%;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    break-inside: avoid;
}

.jie-bottom_child {
    width: 50%;
    display: flex;
}

.l {
    margin: 0 5px;
}

.one-img {
    width: 100%;
    border-radius: 5px;
}

.two-img {
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    height: 25vh;
}

.jie-bottom {
    display: flex;
    justify-content: space-between;
    padding-left: 0.5vh;
    font-size: 11px;
    font-weight: 300;
    padding-right: 0.5vh;
    padding-top: 0.8vh;
}

.jie {
    display: flex;
    flex-direction: column;
    background-color: white;
    margin-top: -0.5vh;
    padding: 5px 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.jie-top {
    font-size: 14px;
    font-weight: 600;
}

.jie img {
    width: 12px;
    height: 12px;
}

.pu-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 95%;
    padding-top: 1vh;
    padding-bottom: 1vh;
    padding-right: 1vh;
}

.user-left {
    display: flex;
    align-items: center;
}

.user-right {
    display: flex;
    font-size: 13px;
    align-items: center;
}


.df {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}

.pu_one {
    width: 48%;
    flex-direction: column;
    display: flex;
    break-inside: avoid;
    flex-direction: column;
}

.pu_one-img {
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.pu-ping {
    font-size: 13px;
    padding-top: 1vh;
}

.pu-div {
    display: flex;
    flex-direction: column;
    background-color: white;
    padding-left: 1vh;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.user-left div {
    font-size: 10px;
    color: #828282;
    padding-left: 1vh;
}

.pu_two {
    width: 96%;
    break-inside: avoid;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.two_img {
    width: 100%;
    border-radius: 5px;
}

.pu_five {
    width: 48%;
    break-inside: avoid;
    display: flex;
    flex-direction: column;
}

.pu_six {
    width: 48%;
    break-inside: avoid;
    display: flex;
    flex-direction: column;
}

.pu_four {
    display: flex;
    flex-direction: column;
    width: 48%;
    break-inside: avoid
}

.pu_three {
    width: 48%;
    display: flex;
    break-inside: avoid;
    flex-direction: column;

}

.pu_et {
    width: 48%;
    break-inside: avoid;
    display: flex;
    flex-direction: column;
}

.pu_sen {
    width: 48%;
    break-inside: avoid;
    display: flex;
    flex-direction: column;
}

.rocket {
    width: 5vh;
    height: 5vh;
    z-index: 9999;

}

/* .backo {
    width: 8vh;
    height: 8vh;
    border-radius: 50%;
    margin-top: -5vh;
    position: absolute;
    box-shadow: 0px 0px 11px 0px rgba(229, 229, 229, 1);
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -34px;
    transform: translateY(0px);
} */


/* 问答 */
.box {
    width: 100%;
    display: flex;
    background-color: white;
    padding-top: 15px;
}

.max_box {
    height: 88px;
    background-color: white;
    display: flex;
    padding-left: 4%;
    padding-bottom: 10%;
    padding-right: 4%;
}

.max_box>img {
    width: 40px;
    height: 40px;
    border-radius: 25px;
}

.max_box_one {
    width: 75%;
    height: 100px;
    border-bottom: 1px solid #e8e8e8;
}

.max_box_one>p {
    font-size: 12px;
    margin: 15px 0;
}

.max_box_one>div {
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.max_box_one img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.max_box_one>div>div {
    display: flex;
    align-items: center;
}

/* 定义过渡效果的 CSS */
.rocket-enter-active,
.rocket-leave-active {
    transition: all 1s;
    /* 假设动画持续 1 秒 */
}

.rocket-enter,
.rocket-leave-to {
    /* 初始状态或结束状态，这里我们让火箭向上移动 */
    transform: translateY(-1300%);
    /* 注意这里可能需要调整，因为百分比通常基于元素本身的高度 */
    position: relative;
    /* 确保元素可以相对于其正常位置移动 */
}

.div-div {
    display: flex;
    align-items: center;
}

.van-notice-bar__wrap {
    position: static !important;
    position: static;
    display: flex;
    flex: 1;
    align-items: center;
    height: 100%;
    overflow: hidden;
}
.backo img {
    width: 50px;
    height: 50px;
    position: absolute;
}
</style>

<template>
    <div class="big">
        <van-tabs v-model:active="active">
            <van-tab title="攻略">
                <div id="contentmax">
                    <div class="gh">
                        <img src="../assets/lkjhg.webp" alt="" class="back-img" />
                        <div class="back">
                            <div class="back-div">
                                <div class="guo">
                                    国宝大熊猫
                                </div>
                                <div class="jiegege">
                                    入住五龙山分别是大能猫“双雄”和“娇奥”双雄,l2016年8月5日出生于成都大能猫.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="list">
                        <div class="list-child" v-for="(item, index) in Strategy" :key="item.id"
                            @click="detail(item.id, index, item)">
                            <img :src="`https://wwz.jingyi.icu${item.img}`" alt="" />
                            <div class="child-right">
                                <div class="right-bold">{{ item.title }}</div>
                                <div class="rightxi">{{ item.introduce }}</div>
                                <div class="right-div">
                                    <img :src="`https://wwz.jingyi.icu${item.avatar}`" alt="" />
                                    <div class="long">{{ item.name }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-tab>
            <van-tab title="游记">
                <div class="pb">
                    <div class="pu_two" v-for="(item, index) in swim" :key="item.id"
                        @click="detail_you(item.id, index, item)">
                        <img :src="`https://wwz.jingyi.icu${item.cover}`" alt="" class="pu_one-img" />
                        <div class="pu-div">
                            <div class="pu-ping">
                                {{ item.title }}
                            </div>
                            <div class="pu-user">
                                <div class="user-left">
                                    <img :src="`https://wwz.jingyi.icu${item.avatar}`" alt="" class="gh_one" />
                                    <div>{{ item.name }}</div>
                                </div>
                                <div class="user-right">
                                    <img src="../assets/love.png" alt="" class="df" />
                                    <div>{{ item.number == null ? '8' : item.number }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-tab>
            <van-tab title="问答">
                <div class="box" v-for="(item, index) in ask" :key="item.id" @click="wendaid(item)">
                    <div class="max_box">
                        <img :src="`https://wwz.jingyi.icu${item.avatar}`" alt="" />
                    </div>
                    <div class="max_box_one">
                        <h5>{{ item.name }}</h5>
                        <p>{{ item.content }}</p>
                        <div>
                            <span>{{ item.create_time }}</span>
                            <div>
                                <img src="../assets/img16865418abb7caa00.png" alt="" />
                                <span> {{ ask_length }} </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="height: 70px;"></div>
            </van-tab>
        </van-tabs>
        <!-- 底部导航栏 -->
        <div class="child">
            <div class="child-child" @click="home()">
                <img src="../assets/home2.png" alt="" class="child-child-img" />
                <div>首页</div>
            </div>
            <div class="child-child">
                <img src="../assets/gio.png" alt="" class="child-child-img" />
                <div style="color: red;">攻略</div>
            </div>
            <div class="child-child">
                <transition name="rocket">
                    <!-- <div class="bzcko_fei"></div> -->
                    <div class="backo" v-if="showRocket">
                        <!-- 这里原本可能有一些内容，比如火箭的图片 -->
                        <img src="../assets/xhj.png" @click="launchRocket" class="rockett" alt="Rocket">
                    </div>
                </transition>
                <img src="../assets/fa.png" alt="" class="child-child-img" />
                <div>发布</div>
            </div>
            <div class="child-child" @click="ranking">
                <img src="../assets/kkk.png" alt="" class="child-child-img" />
                <div>排行榜</div>
            </div>
            <div class="child-child" @click="my">
                <img src="../assets/my.png" alt="" class="child-child-img" />
                <div>我的</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref,onMounted, computed, watch, reactive } from "vue";
// import axios from "axios";
import { intro } from '../api/intro'
import { travels } from '../api/travels'
import { queans } from '../api/queans'
import { useRouter, useRoute } from "vue-router";
import { Tab, Tabs } from 'vant';
const router = useRouter();
const route = useRoute();
const showRocket = ref(true); // 控制火箭是否显示的变量  
console.log(route.query.id);
// 请求攻略接口
const Strategy = ref([])
const strateg = ref([])
intro().then((res) => {
    console.log(res, '攻略接口')
    Strategy.value = res.data
    strateg.value = res.data.id
    console.log(Strategy.value);
})
// 请求游记接口
const swim = ref([])
travels().then((res) => {
    console.log(res, '游记接口')
    swim.value = res.data
    console.log(swim.value);
})
// 请求问答接口
const ask = ref([])
const ask_length = ref("")
queans().then((res) => {
    console.log(res, '问答接口')
    ask.value = res.data
    ask_length = res.data.children.length
    console.log(ask.value);
})
// 点击跳转到首页
const home = () => {
    router.push({
        name: "home",
    });
}
// 跳转到排行榜
const ranking = () => {
    router.push({
        name: "list",
    });
}
// 跳转到我的
const my = () => {
    router.push({
        name: "me"
    })
}
// 跳转到攻略详情
const detail = (Raider_ID, index, item) => {
    router.push({
        name: "Strategy_details"
    })
    console.log(Raider_ID);
    sessionStorage.setItem('Raider_ID', Raider_ID);
    sessionStorage.setItem('gldata', index);
    sessionStorage.setItem('rowitem', JSON.stringify(item));
}
// 跳转到游记详情
const detail_you = (travelssID, index, item) => {
    router.push({
        name: "travels"
    })
    sessionStorage.setItem('travelssID', travelssID);
    sessionStorage.setItem('travelssIDdata', index);
    sessionStorage.setItem('travelssIDitem', JSON.stringify(item));
}

// 跳转到游记详情
const wendaid = (item) => {
    router.push({
        name: "ask"
    })
    sessionStorage.setItem('wendaiditem', JSON.stringify(item));
}
// 定义方法  
const launchRocket = () => {
    // 开始动画  
    showRocket.value = false; // 通过改变数据触发过渡效果  
    // 延迟 1 秒后跳转至 Login 组件（注意：通常我们不会直接跳转到 .vue 文件，而是使用 Vue Router）  
    setTimeout(() => {
        router.push('/review')
        // 假设你使用了 Vue Router，这里的逻辑需要替换为你实际的导航逻辑  
        // 例如，你可以使用 router.push('/login')  
         // 假设你没有使用 Vue Router，你可能需要继续使用 window.location，但这并不是 Vue 的标准做法  
        // window.location.href = '/review'; // 注意这里通常是 URL 路径，而不是 .vue 文件  
    }, 1000); // 假设过渡效果在 1 秒内完成  
};
// 如果有需要，可以在这里添加生命周期钩子  
// 例如，onMounted 会在组件挂载后执行  
onMounted(() => {
    // 组件挂载后的代码  
});
</script>